<template>
  <PageWrapper>
    <a-row cols="1 s:1 m:1 l:3 xl:3 2xl:3" :gutter="[12, 12]">
      <a-col :span="9" class="mb-4">
        <a-card title="字典类型" :segmented="{ content: 'hard' }" :bordered="false" size="small">
          <template #header-extra>
            <a-input-group style="width: 100%">
              <a-input
                clearable
                :style="{ width: '80%' }"
                v-model="leftParams.dictName"
                @keyup.enter="leftReloadTable"
                placeholder="请输入字典名称"
              />
              <a-button type="primary" @click="leftReloadTable">
                <template #icon>
                  <a-icon>
                    <SearchOutlined />
                  </a-icon>
                </template>
                查询
              </a-button>
            </a-input-group>
          </template>
          <BasicTable
            :columns="leftColumns"
            :request="leftLoadDataTable"
            row-key="dictType"
            ref="leftTableRef"
            :row-selection="rowSelection"
            :actionColumn="leftActionColumn"
            @select="onCheckedRow"
          >
            <template #tableTitle>
              <a-space>
                <a-button type="primary" @click="addDictType">
                  <template #icon>
                    <a-icon>
                      <FileAddOutlined />
                    </a-icon>
                  </template>
                  添加
                </a-button>
              </a-space>
            </template>
          </BasicTable>
        </a-card>
      </a-col>
      <a-col :span="15">
        <a-card :bordered="false" class="mb-4 proCard">
          <BasicTable
            :columns="rightColumn"
            :request="loadDataTable"
            row-key="dictCode"
            ref="rightTableRef"
            :actionColumn="actionColumn"
          >
            <template #tableTitle>
              <a-space>
                <a-input-group style="width: 100%">
                  <a-input
                    clearable
                    :style="{ width: '80%' }"
                    v-model="rightParams.dictLabel"
                    @keyup.enter="rightReloadTable"
                    placeholder="请输入字典名称"
                  />
                  <a-button type="primary" @click="rightReloadTable">
                    <template #icon>
                      <a-icon>
                        <SearchOutlined />
                      </a-icon>
                    </template>
                    查询
                  </a-button>
                </a-input-group>
                <a-button type="primary" @click="addDictData">
                  <template #icon>
                    <a-icon>
                      <FileAddOutlined />
                    </a-icon>
                  </template>
                  添加
                </a-button>
              </a-space>
            </template>
          </BasicTable>
        </a-card>
      </a-col>
    </a-row>
    <!-- 添加/编辑 字典 -->
    <AddDictType ref="addDictTypeRef" :title="addDictTypeTitle" @change="leftReloadTable()" />
    <!-- 添加/编辑 字典项 -->
    <AddDictData ref="addDictDataRef" :title="addDictDataTitle" @change="rightReloadTable()" />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive, h, onMounted, nextTick, unref } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { dictTypeList, dictInfo, delDictType, delDictData } from '@/api/system/dictionary';
  import AddDictType from './components/AddDictType.vue';
  import AddDictData from './components/AddDictData.vue';
  import { Message, Tag } from '@arco-design/web-vue';
  import { FileAddOutlined, SearchOutlined } from '@vicons/antd';

  const leftTableRef = ref();
  const rightTableRef = ref();
  const dictTableList = ref<any[]>([]);
  const rowKeysName = ref('');
  const isEdit = ref(false);
  const dictTypeTableList = ref();
  const dictType = ref();
  const addDictTypeRef = ref();
  const addDictDataRef = ref();
  const addDictTypeTitle = ref('添加字典');
  const addDictDataTitle = ref('添加字典项');

  const leftParams = ref({
    dictName: '',
  });

  const rightParams = ref({
    dictLabel: '',
  });

  const rowSelection = ref({
    type: 'radio',
    selectedRowKeys: dictType.value,
  });

  const leftColumns = [
    {
      title: '字典名称',
      dataIndex: 'dictName',
    },
    {
      title: '字典类型',
      dataIndex: 'dictType',
    },
  ];

  const leftActionColumn = reactive({
    width: 175,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    align: 'center',
    render({ record }) {
      return h(TableAction as any, {
        actions: [
          {
            label: '删除',
            popConfirm: {
              content: `您确定要删除【${record.dictName}】吗？`,
              okText: '确定',
              cancelText: '取消',
              onOk: removeDictType.bind(null, record),
            },
          },
          {
            label: '编辑',
            onClick: editDictType.bind(null, record),
          },
        ],
      });
    },
  });

  const rightColumn = [
    {
      title: '字典项名称',
      dataIndex: 'dictLabel',
    },
    {
      title: '字典项值',
      dataIndex: 'dictValue',
    },
    {
      title: '排序',
      dataIndex: 'dictSort',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render({ record }) {
        return h(
          Tag,
          {
            type: record.status === '0' ? 'success' : 'error',
          },
          {
            default: () => (record.status === '0' ? '正常' : '停用'),
          },
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
  ];

  const actionColumn = reactive({
    width: 175,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    align: 'center',
    render({ record }) {
      return h(TableAction as any, {
        actions: [
          {
            label: '删除',
            popConfirm: {
              content: `您确定要删除【${record.dictLabel}】吗？`,
              okText: '确定',
              cancelText: '取消',
              onOk: removeDictData.bind(null, record),
            },
          },
          {
            label: '编辑',
            onClick: editDictData.bind(null, record),
          },
        ],
      });
    },
  });

  //添加字典类型
  function addDictType() {
    addDictTypeRef.value.openModal();
    nextTick(() => {
      isEdit.value = false;
      addDictTypeRef.value.setProps({ title: '添加字典类型' });
    });
  }

  //删除字典类型
  function removeDictType(record) {
    rowKeysName.value = record.dictName;
    delDictType({ dictId: record.dictId }).then(() => {
      Message.success('删除成功');
      leftReloadTable();
    });
  }

  //编辑字段类型
  function editDictType(record) {
    addDictTypeRef.value.openModal();
    nextTick(() => {
      isEdit.value = true;
      addDictTypeRef.value.setProps({ title: '编辑字典类型' });
      addDictTypeRef.value.setFieldsValue({
        ...unref(record),
      });
    });
  }

  //删除字典
  function removeDictData(record) {
    rowKeysName.value = record.dictName;
    delDictData({ dictCode: record.dictCode }).then(() => {
      Message.success('删除成功');
      rightReloadTable();
    });
  }

  //添加字典
  function addDictData() {
    addDictDataRef.value.openModal();
    nextTick(() => {
      isEdit.value = false;
      addDictDataRef.value.setProps({ title: '添加字典项' });
      addDictDataRef.value.setFieldsValue({
        dictType: dictType.value,
      });
    });
  }

  //编辑字典
  function editDictData(record) {
    addDictDataRef.value.openModal();
    nextTick(() => {
      isEdit.value = true;
      addDictDataRef.value.setProps({ title: '编辑字典项' });
      addDictDataRef.value.setFieldsValue({
        ...unref(record),
      });
    });
  }

  //选择字典项
  function onCheckedRow(dictTypes) {
    dictType.value = dictTypes[0];
    rightTableRef.value.reload();
  }

  //刷新字典类型
  function leftReloadTable() {
    leftTableRef.value.restReload();
  }

  //刷新字典列表
  function rightReloadTable() {
    rightTableRef.value.restReload();
  }

  //加载字典项列表
  const leftLoadDataTable = async (res) => {
    const result = await dictTypeList({ ...leftParams.value, ...res });
    dictTypeTableList.value = result.list;
    // 如果没有值 默认选中第一个
    if (!dictType.value && result.list.length) {
      dictType.value = result.list[0].dictType;
      leftTableRef.value?.getTableRef().select([dictType.value]);
      rightReloadTable();
    }
    return result;
  };

  //加载字典项值列表
  const loadDataTable = async (res) => {
    if (!dictType.value) return;
    const result = await dictInfo({ dictType: dictType.value, ...rightParams.value, ...res });
    dictTableList.value = result.list;
    return result;
  };

  onMounted(() => {});
</script>

<style lang="less" setup></style>
